<template>
  <div class="table">
    <div class="title">
      <div class="search">
        <span>订单管理</span>
      </div>
      <div class="search">
        <el-input placeholder="订单号" size="small" v-model="orderId" clearable></el-input>
      </div>
      <div class="search">
        <el-input placeholder="配置" size="small" v-model="config" clearable></el-input>
      </div>
      <div class="search">
        <el-input placeholder="单价" size="small" v-model="price" clearable></el-input>
      </div>
      <div class="search">
        <el-button @click="searchBtn()" size="small" type="primary">搜索</el-button>
      </div>
      <div class="search">
        <el-button @click="addBtn()" size="small" type="primary">新增</el-button>
      </div>
      <div class="search">
        <el-button @click="excelBtn()" size="small" type="primary">导出</el-button>
      </div>
    </div>
    <div>
      <el-table :data="showTable" size = 'small' border max-height="600">
        <el-table-column fixed prop="orderId" label="订单号"  width="220">
        </el-table-column>
        <el-table-column  prop="config" label="配置" width="160">
        </el-table-column>
        <el-table-column prop="price" label="单价/元" width="120">
        </el-table-column>
        <el-table-column prop="count" label="数量/个" width="120">
        </el-table-column>
        <el-table-column prop="contract" label="合同" width="120">
        </el-table-column>
        <el-table-column prop="action" label="执行状态" width="120">
        </el-table-column>
        <el-table-column prop="receipts" label="收款" width="120">
        </el-table-column>
        <el-table-column prop="money" label="金额/元" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button @click.native.prevent="editRow(scope.$index, showTable)" type="primary" size="small">
              编辑
            </el-button>
            <el-button @click.native.prevent="descrBtn(scope.$index, showTable)" type="info" size="small">
              详情
            </el-button>
            <el-button @click.native.prevent="deleteRow(scope.$index, showTable)" type="danger" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination @current-change='handleCurrentChange' :current-page='currentPage' background
        layout="total, prev, pager, next, jumper" :total='tableTotal'>
      </el-pagination>
    </div>
    <el-dialog :title= "dialogTitle" :visible.sync="dialogAddVisible" :before-close="dialogClose">
      <el-form :model="dialogForm">
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.orderId" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="配置" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.config" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.price" autocomplete="off" type = 'number' clearable></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.count" autocomplete="off" type = 'number' clearable></el-input>
        </el-form-item>
        <el-form-item label="合同" :label-width="formLabelWidth">
          <el-select v-model="dialogForm.contract" filterable placeholder="请选择">
            <el-option value="已签"></el-option>
            <el-option value="未签"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行状态" :label-width="formLabelWidth">
          <el-select v-model="dialogForm.action" filterable placeholder="请选择">
            <el-option value="接单"></el-option>
            <el-option value="生产"></el-option>
            <el-option value="出货"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款" :label-width="formLabelWidth">
          <el-select v-model="dialogForm.receipts" filterable placeholder="请选择">
            <el-option value="订单"></el-option>
            <el-option value="全款"></el-option>
            <el-option value="欠尾款"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.money" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="canceBtn()">取 消</el-button>
        <el-button type="primary" @click="confirmBtn()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title= "提示" :visible.sync="dialogDeleteVisible">
      <span>是否确定删除这条记录?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delCance()">取 消</el-button>
        <el-button type="primary" @click="delConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          orderId: '0123456489692565',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '接单',
          receipts: '定金',
          money: '4000元'
        }, {
          orderId: '0123456489692566',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '生产',
          receipts: '全款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }, {
          orderId: '0123456489692567',
          config: '17串三元60V',
          price: '220元',
          count: 200,
          contract: '已签',
          action: '出货',
          receipts: '尾款',
          money: '4000元'
        }
      ],
      orderId: '',
      config: '',
      price: '',
      orderManageInfo: [],
      tableTotal: 0,
      currentPage: 1,
      pageSize: 10,
      dialogAddVisible: false,
      dialogEditVisible: false,
      dialogDescribVisible: false,
      dialogDeleteVisible: false,
      dialogTitle: '',
      orderid: 0,
      dialogForm: {
        orderId: '',
        config: '',
        price: '',
        count: 0,
        contract: '',
        action: '',
        receipts: '',
        money: ''
      },
      formLabelWidth: '80px'
    }
  },
  created () {
    // this.orderManageInfo = this.tableData
    // this.tableTotal = this.tableData.length
    this.getOrderManageData()
    // window.console.log(this.orderManageInfo)
  },
  computed: {
    showTable () {
      // window.console.log(1)
      return this.orderManageInfo.slice(
        (this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
    },
    searchBtn () {
      this.getOrderManageData()
    },
    addBtn () {
      this.dialogTitle = '新增'
      this.dialogAddVisible = true
      // window.console.log(this.dialogForm)
    },
    excelBtn () {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../../excel/Export2Excel')// eslint-disable-line
        const tHeader = ['订单号', '配置', '单价/元', '数量/个', '合同', '执行状态', '收款', '金额/元']
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['orderId', 'config', 'price', 'count', 'contract', 'action', 'receipts', 'money']
        // 上面的index、phone_Num、school_Name是tableData里对象的属性
        const list = this.orderManageInfo
        // 把data里的tableData存到list
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '订单报表')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    editRow (id, data) {
      // window.console.log(id)
      // window.console.log(data[id])
      this.dialogTitle = '编辑'
      this.dialogForm = data[id]
      // window.console.log(this.dialogForm)
      this.dialogAddVisible = true
    },
    descrBtn (id, data) {
      this.dialogForm = data[id]
      this.dialogTitle = '详细'
      // window.console.log(this.dialogForm)
      this.dialogAddVisible = true
    },
    deleteRow (id, data) {
      this.dialogForm = data[id]
      this.dialogDeleteVisible = true
    },
    dialogClose () {
      this.dialogAddVisible = false
      this.dialogForm = {}
    },
    canceBtn () {
      this.dialogAddVisible = false
      this.dialogForm = {}
      // window.console.log(this.dialogForm)
    },
    confirmBtn () {
      this.submit()
      this.dialogAddVisible = false
      this.dialogForm = {}
      // window.console.log(this.dialogForm)
    },
    delCance () {
      this.dialogForm = {}
      this.dialogDeleteVisible = false
    },
    delConfirm () {
      this.delOrderManageData()
      this.dialogDeleteVisible = false
    },
    submit () {
      this.$http.post('http://localhost/stock_id_project1/public/index.php/index/index/submit_order_manage_info',
        {formData: this.dialogForm}, {emulateJSON: true}).then(function (response) {
        window.console.log(response.body)
        // this.orderManageInfo = response.body
        this.getOrderManageData()
      }, function (params) {
        window.console.log('submit fail')
        window.console.log(params.status)
      })
    },
    delCustomerData () {
      this.$http.post('http://localhost/stock_id_project1/public/index.php/index/index/delete_order_manage_info',
        {formData: this.dialogForm}, {emulateJSON: true}).then(function (response) {
        this.getOrderManageData()
      }, function (params) {
        window.console.log('submit fail')
        window.console.log(params.status)
      })
    },
    getOrderManageData () {
      this.$http.post('http://localhost/stock_id_project1/public/index.php/index/index/get_order_manage_info',
        {orderId: this.orderId, config: this.config, price: this.price}, {emulateJSON: true}).then(function (response) {
        window.console.log(response.body)
        this.orderManageInfo = response.body
        this.tableTotal = this.orderManageInfo.length
      }, function (params) {
        window.console.log('create fail')
        window.console.log(params.status)
      })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.table
  margin-top: 0px
  padding: 10px 10px 5px 10px
  background: rgba(252,252,250,1)
  overflow: hidden
  .title
    display: inline-block
    font-size: 25px
    font-family:'Courier New', Courier, monospace
    .search
      float: left
      margin: 0px 10px 0 10px
  .tabledata
    margin: 0px
</style>
